<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../../doodle模块/css-doodle.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/css-doodle/0.39.2/css-doodle.js"></script>
    <style>
      html,
  body {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #fff;
  }
  
  body::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    right: -100%;
    bottom: -100%;
    backdrop-filter: blur(100px);
    z-index: 2;
  }
  form {
    position: relative;
            z-index: 4;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            border: 2px solid rgba(0, 0, 0, 0); /* 设置透明边框 */
            padding: 1rem; /* 添加内边距以使表单元素与边框保持一定距离 */            
            opacity: 0.79;
            border-color: rgba(247, 246, 244); /* 使用rgba()函数设置透明边框 */
            border-radius: horizontal, vertical;
            border-width: 2px; /* 边框宽度 */
            border-style: solid; /* 边框样式 */
            padding: 10px; /* 为了更好的视觉效果，添加一些内边距 */
            
        }
  css-doodle {
              position: absolute; /* 确保css-doodle元素位于绝对定位，以便我们可以调整其z-index */
            z-index: 1; /* 将css-doodle元素的z-index设置为2，使其位于背景之上，但在表单之下 */
        }

  </style>
</head>

<body>
    <p>Click Me</p>
    <!-- <div class="form-container">
        <form action="your_submit_url" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" cols="50" required></textarea>
        <input type="submit" value="Submit">
    </form>
    </div> -->
<css-doodle>
    :doodle {
        @grid: 1x20 / 100vmin;
    }
    @place-cell: center;
    width: @rand(60vmin, 100vmin);
    height: @rand(60vmin, 100vmin);
    transform: translate(@rand(-120%, 120%), @rand(-80%, 80%)) scale(@rand(.8, 2.8)) skew(@rand(45deg));
    clip-path: polygon(
      @r(0, 30%) @r(0, 50%), 
      @r(30%, 60%) @r(0%, 30%), 
      @r(60%, 100%) @r(0%, 50%), 
      @r(60%, 100%) @r(50%, 100%), 
      @r(30%, 60%) @r(60%, 100%),
      @r(0, 30%) @r(60%, 100%)
    );
    background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf, #e136eb, #f57c23, #32ed39);
    opacity: @rand(.5, .9);
    position: relative;
    top: @rand(-80%, 80%);
    left: @rand(-80%, 80%);
    animation: colorChange @rand(6.1s, 26.1s) infinite @rand(-.5s, -2.5s) linear alternate;
  @keyframes colorChange {
    100% {
      left: 0;
      top: 0;
      filter: hue-rotate(360deg);
    }
  }
</css-doodle>
</body>
</html>